<template>
  <div>
    <button @click="isShow = !isShow">切换</button>
    <!-- 
      使用vue动画的第一个要求:
        - 必须使用v-if或者v-show进行条件渲染,或者使用路由进行切换,或者新增删除数据导致DOM的新增和删除
        - 在需要执行动画元素的外层添加transition组件

     -->
    <transition>
      <div v-if="isShow" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: yellowgreen;
}
/* 如果我们是按照进入动画封装的关键帧动画,则from就是进来之前的样式,to就是进入之后的样式(to不用写) */
@keyframes enter {
  from {
    transform: translate(100px, 100px) rotate(360deg);
    opacity: 0;
    background: pink;
  }
  50% {
    transform: translate(100px, 0px) rotate(360deg);
    opacity: 0.3;
    background: blue;
  }
  to {
  }
}

/* 使用进入时的类,控制进入动画 */
.v-enter-active {
  animation: enter 1s linear;
}
.v-leave-active {
  animation: enter 1s linear reverse;
}
</style>
